<template>
  <div class="active51">
    <!-- banner -->
    <div class="banner">
      <img
        v-if="$store.state.app.language === 'en' || $store.state.app.language === 'ko'"
        src="../../../assets/img/activity/benefits/banner-en.png" alt="">
      <img v-else src="../../../assets/img/activity/benefits/banner-cn.png" alt="">
    </div>
    <!-- 五一福利 -->
    <div class="welfare">
      <div class="welfareCont">
        <div class="backIconRight"></div>
        <div class="welfareCaption">
          {{ $t('activity51.benefits') }}
        </div>
        <div class="welfareMain">
          <div class="welfareList">
            <span class="colorYellow">{{ $t('activity51.activityTime') }}</span>
            <span>{{ $t('activity51.timeCont') }}</span>
          </div>
          <div class="welfareList">
            <p class="colorYellow">{{ $t('activity51.rule') }}</p>
            <p>{{ $t('activity51.ruleCont1') }}</p>
            <p>{{ $t('activity51.ruleCont2') }}</p>
            <p>{{ $t('activity51.ruleCont3') }}</p>
          </div>
          <div class="welfareList">
            <span class="colorYellow">{{ $t('activity51.airdropTime') }}</span>
            <span>{{ $t('activity51.airdropCont') }}</span>
          </div>
          <div class="welfareList">
            <p class="colorYellow">{{ $t('activity51.remarks') }}</p>
            <p>{{ $t('activity51.remarks1') }}</p>
            <p>{{ $t('activity51.remarks2') }}</p>
          </div>
        </div>
        <span class="humanIcon"></span>
      </div>
    </div>
    <!-- 空投糖果 -->
    <div class="candy">
      <div class="candyCont">
        <div class="backIconLeft"></div>
        <div class="candyCaption">
          <span class="boxIcon"></span>
          {{ $t('activity51.candy') }}
        </div>
        <div class="candyList">
          <div class="candyItem flexb mbd">
            <div class="flexb back1" @click="handleToTrad('DICE')">
              <div class="imgIcon">
                <img src="../../../assets/img/activity/benefits/dice.png" alt="">
              </div>
              <div class="codeCont">
                <p>DICE</p>
                <p class="fn-text1" style="-webkit-box-orient: vertical;">{{ $t('activity51.DICE') }}</p>
                <p>{{ $t('activity51.Circulation') }}8800000000 DICE</p>
                <p>{{ $t('activity51.airdropAmount') }}1600000</p>
              </div>
            </div>
            <div class="flexb back2"  @click="handleToTrad('MTS')">
              <div class="imgIcon">
                <img src="../../../assets/img/activity/benefits/mts.png" alt="">
              </div>
              <div class="codeCont">
                <p>MTS</p>
                <p class="fn-text1" style="-webkit-box-orient: vertical;">{{ $t('activity51.MTS') }}</p>
                <p>{{ $t('activity51.Circulation') }}100000000000 MTS</p>
                <p>{{ $t('activity51.airdropAmount') }}5000000</p>
              </div>
            </div>
          </div>
          <div class="candyItem flexb mbd">
            <div class="flexb back3" @click="handleToTrad('LED')">
              <div class="imgIcon flexc" style="width: 100px;">
                <img style="width: 85px;" src="../../../assets/img/activity/benefits/led.png" alt="">
              </div>
              <div class="codeCont">
                <p>LED</p>
                <p class="fn-text1" style="-webkit-box-orient: vertical;">{{ $t('activity51.LED') }}</p>
                <p>{{ $t('activity51.Circulation') }}1000000000 LED</p>
                <p>{{ $t('activity51.airdropAmount') }}100000</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="moreCandy clearfix">
        <span class="fr" @click="$router.push({name: 'member'})" v-if="$store.state.app.scatter.identity">{{ $t('activity51.moreCandy') }}</span>
        <span class="fr" v-else @click="$router.push({name: 'member-not-logged'})">{{ $t('activity51.moreCandy') }}</span>
      </div>
    </div>
    <!-- 分享好友 -->
    <div class="shareFriend">
      <div class="shareFriendCont flexb">
        <div class="shareLeft">
          <img src="../../../assets/img/activity/benefits/share.png" alt="">
        </div>
        <div class="shareRight">
          <p>{{ $t('activity51.shareFriend') }}</p>
          <div class="copy clearfix">
            <span class="fl fn-text1"  style="-webkit-box-orient: vertical;">{{ $t('activity51.shareUrl') }}</span>
            <span class="fr"
              v-clipboard:copy="$t('activity51.shareUrl')"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError">{{ $t('activity51.copy') }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 媒体声音 -->
    <div class="media">
      <div class="mediaCont">
        <div class="backIconRight"></div>
        <div class="backIconLeft"></div>
        <div class="mediaCaption flexc">
          <div class="title">
            {{ $t('activity51.media') }}
          </div>
          <span class="titleLeft"></span>
          <span class="titleRight"></span>
        </div>
        <div class="mediaMain">
          <span class="mediaHumanIcon"></span>
          <ul>
            <template v-for="(item, index) in mediaList" >
              <li class="flex" v-if="index < rowCount" :key="index" @click="handleToJump(item.href)">
                <div class="mediaMainImg">
                  <img :src="item.imgUrl" alt="">
                  <p>{{ item.imgName }}</p>
                </div>
                <div class="mediaMainWord">
                  <p>{{ item.title }}</p>
                  <p>{{ item.content }}</p>
                </div>
              </li>
            </template>
          </ul>
          <div class="more clearfix" v-if="lookMoreHide">
            <span class="fr" @click="handleShowMore">{{ $t('activity51.lookMore') }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'benefits', // 51活动
  components: {
  },
  data() {
    return {
      mediaList: [
        {
          imgUrl: '/static/activity/benefits/Business.png',
          imgName: 'Business Wire',
          title: 'Industry Observation: Newdex - The Icebreaker and Trends Leader of Decentralized Exchanges',
          content: `Meanwhile, Newdex uses the most of EOS performance–super high TPS, settling on EOS, 
          launching code scanning exchange and wallet embedded version rapidly, listing the Tokens on EOS 
          main net ahead of others, becoming a leading new-generation decentralized exchange.`,
          href: 'https://www.businesswire.com/news/home/20190311005960/en/Industry-Observation-Newdex---Icebreaker-Trends-Leader',
        },
        {
          imgUrl: '/static/activity/benefits/nbc2.png',
          imgName: 'nbc2',
          title: 'TokenInsight Latest Weekly Report: Newdex Occupies More Than 50% of EOS Trading Volume',
          content: `Newdex cooperates with 26 Wallets around the world, including Bitpie, Huobi Wallet, imToken, Math Wallet, TokenPocket, 
          MEET.ONE, basically covering all EOS ecological Wallet. Through the way of phone wallet code scanning login function in website 
          and opening phone wallet embedded version, Newdex greatly enhances the user experience while not touching the user’s private key.`,
          href: 'https://www.nbc-2.com/story/40342825/tokeninsight-latest-weekly-report-newdex-occupies-more-than-50-of-eos-trading-volume',
        },
        {
          imgUrl: '/static/activity/benefits/trybe.png',
          imgName: 'TRYBE',
          title: '去中心化交易深度代表–Newdex全球成交量最大的去中心化交易所',
          content: '在EOS生态中，要交易糖果，Newdex是你最好的选择，同时也让Newdex达到全球成交量最大的去中心化交易所的高度。',
          href: 'https://trybe.one/%E5%8E%BB%E4%B8%AD%E5%BF%83%E5%8C%96%E4%BA%A4%E6%98%93%E6%B7%B1%E5%BA%A6%E4%BB%A3%E8%A1%A8-newdex%E5%85%A8%E7%90%83%E6%88%90%E4%BA%A4%E9%87%8F%E6%9C%80%E5%A4%A7%E7%9A%84%E5%8E%BB%E4%B8%AD%E5%BF%83/',
        },
        {
          imgUrl: '/static/activity/benefits/huoxing.png',
          imgName: '火星财经',
          title: '首家基于EOS去中心化交易所：Newdex打破现有平台痛点',
          content: '全新一代去中心化交易所，打破中心化交易所集中管理资产弊病，同时兼顾交易性能。',
          href: 'https://www.huoxing24.com/newsdetail/20180807180741361465.html',
        },
        {
          imgUrl: '/static/activity/benefits/2news.png',
          imgName: '2NEWS',
          title: 'The Decentralized Exchange Newdex Opens the ENU Trading Zone Officially',
          content: `Newdex will gradually open the cross-chain market by supporting EOS main and side chain trading. 
          The Decentralized Exchanges have a century-long battle with the Centralized Exchanges by solving trading needs, 
          trading experience, and taking advantage of data and order information in chain.`,
          href: 'http://www.ktvn.com/story/40219984/the-decentralized-exchange-newdex-opens-the-enu-trading-zone-officially',
        },
        {
          imgUrl: '/static/activity/benefits/hexun.png',
          imgName: '和讯区块链',
          title: '老猫：我的2018',
          content: `使用过 newdex.io 之后，你会发现中心化交易所的体验优势已经不存在了，我用比特派注册的 eos 账户，在这个平台交易，
          过程无比丝滑，体验感人，只要绑定一次 eos 账户，就再也没有其他注册登录之类的烦恼了，挂单成交后，瞬间资产就转到了自己钱包的账户，这是最符合我交易习惯的交易平台之一，特别推荐。`,
          href: 'http://blockchain.hexun.com/2019-01-02/195734362.html',
        },
        {
          imgUrl: '/static/activity/benefits/bihu.png',
          imgName: '币乎',
          title: 'Newdex去中心化交易所初体验',
          content: 'Newdex 全球首家基于EOS生态的去中心化交易所，具有安全、透明、快速等特点，引领行业进入去中心化交易的美好新时代。',
          href: 'https://bihu.com/article/1267945',
        },
        {
          imgUrl: '/static/activity/benefits/Koinalert.png',
          imgName: 'Koinalert',
          title: 'TokenInsight January Report: The Average Daily Transaction Volume of Newdex Ranks First',
          content: `On the web version, users can login and start trading through the wallet. Or they can find Newdex in the mobile wallet, 
          and trade directly. Through the wallet authorization, the users ‘ private keys are kept by themselves, 
          and the platform has no access to the users’ private keys, which is highly secure.`,
          href: 'https://www.koinalert.com/tokeninsight-january-report-the-average-daily-transaction-volume-of-newdex-ranks-first/',
        },
        {
          imgUrl: '/static/activity/benefits/jianshu.png',
          imgName: '简书',
          title: '为何跨链最近获得很多关注？',
          content: `Newdex作为去中心化的交易所，本身就拥有中心化交易所不具有的优势，那就是人为不安全因素的排除影响，
          而且Newdex现在选择的实现跨链的方法是与各大主流钱包进行沟通，可以降低用户的使用成本和学习成本，用原来熟悉的钱包转账到交易所或者钱包内置交易所的方式就可以实现加密货币的自由流通。`,
          href: 'https://www.jianshu.com/p/ba0c8832528a',
        },
        {
          imgUrl: '/static/activity/benefits/zhanzhang.png',
          imgName: '站长之家',
          title: 'Newdex如何裸出新高度？',
          content: '目前来看，安全透明、高效快捷的newdex已经打破中心化交易所集中管理资产安全的弊病，同时兼顾交易性能。在未来，伴随区块练技术的进一步探索和开发，Newdex或将成为新时代去中心化交易所的标杆。',
          href: 'https://www.jianshu.com/p/ba0c8832528a',
        },
        {
          imgUrl: '/static/activity/benefits/souhu.png',
          imgName: '搜狐',
          title: 'Newdex是这样的全球首家基于EOS去中心化交易所',
          content: '搭建在EOS主链之上，Newdex开启去中心化交易美好新时代 Newdex运行在EOS上，作为全球TPS最高的公有链，完美支持平台性能，交易速度媲美中心化交易所。',
          href: 'http://www.sohu.com/a/245919101_100119172',
        },
        {
          imgUrl: '/static/activity/benefits/xiaoniu.png',
          imgName: '小牛情报',
          title: 'EOS生态晴雨表- Newdex交易所',
          content: '作为基于EOS生态搭建的去中心化交易平台，Newdex具备头部效应和优势，真实反映了EOS生态的发展状况，被看作是EOS网络生态的晴雨表名副其实。',
          href: 'http://www.xnqb.com/coinbar/detail?tid=64059',
        },
        {
          imgUrl: '/static/activity/benefits/teshidai.png',
          imgName: '特时代',
          title: '你根本无法预见Newdex的未来',
          content: 'EOS的未来无法想象，Newdex也不会停止走向未来的步伐。最终去中心化的自治、公开透明、无法篡改，也许会从交易所最先实现起来。',
          href: 'http://www.tetimes.com/money/20181022/769.html',
        },
        {
          imgUrl: '/static/activity/benefits/zhongjin.png',
          imgName: '中金在线',
          title: '头部去中心化交易Newdex首创钱包紧密合作模式',
          content: `但目前Newdex已经拥有EOS主网上的160多个交易对,基本实现EOS生态钱包的全覆盖,并且开始了与BTC、ETH、火币等老一派钱包的对接,
          未来实现Newdex对全网钱包的覆盖值得期待,Newdex用“钱包对接交易所”这一杠杆或许正在撬动加密货币生态的整体环境发生变化,这一步迈的极为漂亮。`,
          href: 'http://hy.stock.cnfol.com/bankuaijujiao/20190218/27262697.shtml',
        },
      ],
      rowCount: 5, // 显示条数
      lookMoreHide: true, // 显示查看更多
    };
  },
  props: {
  },
  watch: {
  },
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    // 跳转到交易页
    handleToTrad(val) {
      if (val === 'DICE') {
        this.$router.push({
          path: '/trade/betdicetoken-dice-eos'
        });
      }
      if (val === 'LED') {
        this.$router.push({
          path: '/trade/okkkkkkkkkkk-led-eos'
        });
      }
      const language = this.$store.state.app.language === 'en' || this.$store.state.app.language === 'ko' ? 1 : 0;
      if (val === 'MTS' && language) {
        window.open('https://newdex.zendesk.com/hc/en-us/articles/360027713271-Newdex-Fourteen-VIP-Airdrop-Join-Newdex-Membership-to-Divide-10000000-MTS');
      }
      if (val === 'MTS' && !language) {
        window.open('https://newdex.zendesk.com/hc/zh-cn/articles/360027713271-Newdex%E4%BC%9A%E5%91%98%E7%AC%AC%E5%8D%81%E5%9B%9B%E6%9C%9F%E7%A9%BA%E6%8A%95-%E5%BC%80%E9%80%9ANewdex%E4%BC%9A%E5%91%98%E5%B0%8A%E4%BA%AB-10000000-MTS');
      }
    },
    // 媒体声音跳转链接
    handleToJump(href) {
      window.open(href);
    },
    // 查看更多
    handleShowMore() {
      this.rowCount = 30;
      this.lookMoreHide = false;
    },
    onCopy() {
      this.$message.success(this.$t('myWallet.copySuccess'));
    },
    onError() {
      this.$message.error(this.$t('myWallet.copyError'));
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
.colorYellow {
  color: #F8E71C !important;
}

.back1 {
  background: linear-gradient(to right, #ff9100 , #ffb700) !important;
}

.back2 {
  background: linear-gradient(to right, #ff4705 , #ff6d43) !important;
}

.back3 {
  background: linear-gradient(to right, #5867f5 , #50b2fe) !important;
}

.back4 {
  background: linear-gradient(to right, #6f3ef5 , #667afe) !important;
}

.back1, .back2, .back3, .back4 {
  cursor: pointer;
}

.active51 {
  color: #fff;
  height: 100%;
  min-height: 100vh;
  background: #331199;
  max-width: 100%;
  overflow-x: hidden;
  margin-bottom: -1px;

  .banner {
    width: 100%;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .welfare {
    margin-top: 80px;

    .welfareCont {
      position: relative;
      width: 1060px;
      margin: auto;
      min-height: 30vh;
      background: url('../../../assets/img/activity/benefits/welfareBack.png');
      background-size: 100% 100%;
      padding: 60px 72px;

      .backIconRight {
        position: absolute;
        right: -25%;
        top: 70px;
        width: 131px;
        height: 164px;
        background: url('../../../assets/img/activity/benefits/left.png');
        background-size: 100% 100%;
        z-index: 100;
      }

      .welfareCaption {
        position: absolute;
        top: -30px;
        left: 50%;
        // width: 250px;
        padding: 0 60px;
        height: 70px;
        line-height: 70px;
        border-radius: 21px;
        font-size: 32px;
        transform: translateX(-50%);
        text-align: center;
        background: linear-gradient(0deg, #7120F2 0%, #BC5DFF 100%);
      }

      .humanIcon {
        position: absolute;
        bottom: 10px;
        right: 20px;
        display: block;
        width: 128px;
        height: 175px;
        background: url('../../../assets/img/activity/benefits/human-mobile.png') no-repeat;
        background-size: 100% 100%;
      }

      .welfareMain {
        font-size: 21px;

        p {
          line-height: 30px;
          margin-bottom: 10px;
        }

        .welfareList {
          margin-bottom: 30px;
        }
      }
    }
  }

  .candy {
    margin-top: 80px;
    padding-bottom: 40px;

    .candyCont {
      position: relative;
      width: 1060px;
      margin: auto;

      .backIconLeft {
        position: absolute;
        left: -25%;
        top: 70px;
        width: 131px;
        height: 164px;
        background: url('../../../assets/img/activity/benefits/right.png');
        background-size: 100% 100%;
        z-index: 100;
      }

      .candyCaption {
        position: absolute;
        top: -30px;
        left: 50%;
        // width: 250px;
        padding: 0 60px;
        height: 70px;
        line-height: 70px;
        border-radius: 21px;
        font-size: 32px;
        transform: translateX(-50%);
        text-align: center;
        background: linear-gradient(0deg, #7120F2 0%, #BC5DFF 100%);

        .boxIcon {
          position: absolute;
          display: block;
          top: 0;
          right: -40px;
          width: 108px;
          height: 87px;
          background: url('../../../assets/img/activity/benefits/box.png') no-repeat;
          background-size: 100% 100%;
        }
      }

      .candyList {
        padding-top: 70px;

        .candyItem {
          & > div {
            padding: 20px;
            width: 520px;
            height: 143px;
            border-radius: 8px;

            .imgIcon {
              width: 100px;
              height: 100px;
              background: #fff;
              border-radius: 50%;

              img {
                display: inline-block;
                overflow: hidden;
                width: 100px;
              }
            }

            .codeCont {
              width: 360px;
              padding-right: 10px;

              p {
                margin-bottom: 2px;
              }

              p:nth-child(1) {
                margin-bottom: 6px;
                font-size: 18px;
              }
            }
          }
        }
      }
    }

    .moreCandy {
      width: 1060px;
      margin: auto;
      font-size: 24px;
      color: #A8D0FF;

      span {
        cursor: pointer;
      }
    }
  }

  .shareFriend {
    margin: 80px 0 0 40px;

    .shareFriendCont {
      width: 1060px;
      margin: auto;
      .shareRight {
        width: 800px;

        p {
          font-size: 32px;
          color: #F8E71C;
          margin-bottom: 30px;
        }

        .copy {
          height: 60px;

          span:nth-child(1) {
            width: 650px;
            padding: 0 10px;
            background: #fff;
            font-size: 18px;
            color: #363636;
            line-height: 60px;
            border-radius: 7px 0 0 7px;
          }

          span:nth-child(2) {
            width: 150px;
            padding: 0 10px;
            font-size: 18px;
            color: #fff;
            line-height: 60px;
            background: linear-gradient(-133deg, #426BFF 0%, #3D9EFF 100%);
            border-radius: 0 7px 7px 0;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }

  .media {
    margin-top: 200px;
    margin-bottom: 100px;
    min-height: 300px;

    .mediaCont {
      position: relative;
      width: 1060px;
      margin: auto;

      .backIconRight {
        position: absolute;
        right: -25%;
        top: 70px;
        width: 131px;
        height: 164px;
        background: url('../../../assets/img/activity/benefits/left.png');
        background-size: 100% 100%;
        z-index: 100;
      }

      .backIconLeft {
        position: absolute;
        left: -25%;
        bottom: 0px;
        width: 131px;
        height: 164px;
        background: url('../../../assets/img/activity/benefits/right.png');
        background-size: 100% 100%;
        z-index: 100;
      }

      .mediaCaption {
        position: absolute;
        top: -70px;
        left: 0;
        width: 100%;
        font-size: 32px;

        .title {
          padding: 0 60px;
          height: 70px;
          line-height: 70px;
          background: linear-gradient(0deg, #3023AE 5%, #C86DD7 100%);
          border-radius: 29px 29px 0 0;
        }

        .titleLeft {
          position: absolute;
          top: 10px;
          left: 120px;
          width: 234px;
          height: 52px;
          background: url('../../../assets/img/activity/benefits/media-left.png') no-repeat;
          background-size: 100% 100%;
        }

        .titleRight {
          position: absolute;
          top: 10px;
          right: 120px;
          width: 234px;
          height: 52px;
          background: url('../../../assets/img/activity/benefits/media-right.png') no-repeat;
          background-size: 100% 100%;
        }
      }

      .mediaMain {
        position: relative;
        width: 1060px;
        min-height: 200px;
        box-shadow: inset 0 1px 23px 0 rgba(255,255,255,0.50);
        border-radius: 33px;
        padding: 43px 43px 28px 43px;

        .more {
          font-size: 24px;
          color: #A8D0FF;

          span {
            cursor: pointer;
          }
        }

        .mediaHumanIcon {
          position: absolute;
          right: 0;
          top: -65px;
          width: 65px;
          height: 133px;
          background: url('../../../assets/img/activity/benefits/human.png') no-repeat;
          background-size: 100% 100%;
        }

        ul {
          li {
            background: linear-gradient(90deg, #7120F2 0%, #BC5DFF 100%);
            border-radius: 5px;
            padding: 25px 20px 25px 0;
            margin-bottom: 15px;
            cursor: pointer;

            .mediaMainImg {
              width: 150px;
              height: 55px;
              margin-right: 20px;
              margin-bottom: 20px;

              img {
                display: block;
                width: 150px;
                margin-bottom: 5px;
                margin-left: -10px;
              }

              p {
                text-align: center;
              }
            }

            .mediaMainWord {
              // padding-left: 20px;

              p:nth-child(1) {
                font-size: 18px;
                color: #F8E71C;
                margin-bottom: 13px;
              }

              p:nth-child(2) {
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }
}

.theme-278EDA {
}
.theme-1B1D27 {
}
</style>

